<%--
  Created by IntelliJ IDEA.
  User: Wang Ziming
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>创建队伍</title>
</head>
<body>
<%--基本布局与concreteGroup.jsp页面类似--%>
    <%@include file="/WEB-INF/parts/head.jsp"%>
    <h2 class="content-name" style="font-family: STSong"><b>Group Travel</b></h2>

    <form action="/group/finishGroup" method="post">
        <table align="center" border="1" cellpadding="0" cellspacing="0" width="80%">
            <thead>
            <tr>
                <th colspan="5">
                    队伍名称<center><input type="text" name="groupName" id="groupName"></center>
                </th>
            </tr>
            </thead>
            <tbody align="center">
            <tr>
                <%--信息栏--%>
                <td rowspan="7" colspan="3" id="info-column" align="left">
                    <%--输出信息--%>
                    出游路径（逗号分割）：<br>
                    <textarea rows="6" cols="50" name="destinations" placeholder="如南航,翠屏山,牛首山,新街口,杭州西湖"></textarea>
                </td>
            </tr>
            <%--有5行2列--%>
            <tr>
                <td>
                    <%--使用placeholder可以实现文本框初始有文字，点击之后文字消失--%>
                    集合时间：<input type="text" name="gatheringTime" class="info-text" placeholder="如2020-12-12"><br><br>
                    集合地点：<input type="text" name="meetingPlace" class="info-text" placeholder="如南航将军路校区北门"><br><br>
                    持续时间：<input type="text" name="duration" class="info-text" placeholder="如5天、1周"><br><br>
                    队伍人数：<input type="text" name="numOfPeople" class="info-text" placeholder="如5、3">
                </td>
            </tr>
            </tbody>
        </table>

        <p>
            <%--一种崭新的方式--%>
            <input type="button" value="取消" id="no" onclick="window.location.href='/group'">
            <input type="submit" value="确定" id="yes">
        </p>
    </form>


</body>
<%--css--%>
<link type="text/css" rel="stylesheet" href="/css/index.css">
<style>
    /*整个表格table的设置*/
    table{
        height: 70%;        /*刚刚好*/
    }
    /*队伍名*/
    th{
        font-family: 微软雅黑;
        height: 12%;
    }
    th span{
        /*padding-left:*/
    }
    th input{
        height: 35px;       /*大小刚刚好*/
        text-align: center;
    }
    /*左侧信息栏*/
    #info-column{
        width: 50%;
        /*针对tr行的偏移情况*/
        padding-left: 40px;
    }
    /*textarea*/
    textarea{
        width: 90%;
    }
    .info-text{
        width: 70%;
    }
    /*取消和确定*/
    #no{
        margin-left: 10%;  /*ok*/
    }
    #yes{
        margin-left: 71.5%;
    }
</style>
</body>
</html>
